<!DOCTYPE html>
<html lang="en" xmlns:http="http://www.w3.org/1999/xhtml" xmlns: xmlns:>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"
    />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>福山</title>
    <link rel="stylesheet" type="text/css" href="../css/common.css" />
    <link rel="stylesheet" type="text/css" href="../css/element/elemet-ui.css" />
    <link rel="stylesheet" type="text/css" href="../css/rem.css" />
    <link rel="stylesheet" href="../css/repeat.css">
    <link rel="stylesheet" href="../css/fonts/iconfont.css">
    <link rel="stylesheet" href="../js/jquery-range/jquery.range.css">
    <!-- <link href="../assets/css/GA.css" type="text/css" rel="stylesheet"> -->
    <style type="text/css">
        #app {
            width: 100vw;
            height: 100vh;
            display: flex;
            flex-direction: column;
            flex-wrap: nowrap;
            background-image: url('../image/bigscreen-bj.png');
            background-size: 100%;
            background-repeat: no-repeat;
        }

        .el-tree-node__content:hover {
            background-color: rgba(0, 0, 0, .8);
        }

        .el-input__inner {
            background-color: #00295C !important;
            border: 1px solid #056DAD !important;
            color: rgb(0, 174, 244) !important;
        }

        /* 定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸 */

        .sroll-2::-webkit-scrollbar {
            width: 0px;
            height: 0px;
            background-color: transparent;
        }

        /* 定义滚动条轨道 内阴影+圆角 */

        .sroll-2::-webkit-scrollbar-track {
            /*-webkit-box-shadow: inset 0 0 6px #fff;*/
            border-radius: 1px;
            background-color: #0051AA;
        }

        /* 定义滑块 内阴影+圆角 */

        .sroll-2::-webkit-scrollbar-thumb {
            border-radius: 1px;
            /*-webkit-box-shadow: inset 0 0 6px #00a7ec;*/
            background-color: #0051AA;
        }

        .tabUl {
            float: left;
            margin: 18px 0 0 30rem;
            /* overflow: hidden; */
        }

        .tabUl li {
            float: left;
            padding: 0px 20px;
            height: 55px;
            line-height: 55px;
            color: #79afff;
            font-size: 16px;
            cursor: pointer;
            position: relative
        }

        .tabUl li.li_active {
            height: 77px;
            font-size: 18px;
            line-height: 80px;
            border-bottom: 3px solid #0070ff;
        }

        .tabUl ul {
            width: 100%;
            height: auto;
            overflow: hidden;
            position: absolute;
            left: 0
        }

        .tabUl>li:hover {
            background: #2471e4;
            color: #fff;
            border-top-right-radius: 5px;
            border-top-left-radius: 5px;
            -webkit-border-top-left-radius: 5px;
        }

        .tabUl>li:hover ul {
            display: block
        }

        .tabUl>li ul {
            display: none;
            background: #2471e4;
            color: #fff;
            border-bottom-right-radius: 5px;
            border-bottom-left-radius: 5px;
            -webkit-border-bottom-left-radius: 5px;
        }

        .tabUl ul li {
            height: 40px;
            line-height: 40px;
            padding: 0;
            width: 100%;
            text-align: center;
            color: #fff
        }

        .tabUl ul li:hover {
            background: #fff;
            color: #666666
        }

        .ticket-content {
            width: 97vw;
            height: 83vh;
            background: #fff;
            margin: 0 auto;
            border-radius: 5px;
            -webkit-border-radius: 5px;
        }

        .ticket-content-top {
            width: 100%;
            height: 19.5rem;
            display: flex;
        }

        .ticket-content-top .top-left {
            width: 25rem;
            height: 100%;
        }

        .ticket-content-top .top-left .common-contact {
            width: 100%;
            height: 10.9rem;
            padding: .6rem 1.1rem 0 1.1rem;
        }

        .common-contact h5 span {
            font-size: 20px;
            color: #333333
        }

        .el-input__inner {
            background-color: #fff !important;
            border: 1px solid #e9e9e9 !important;
            height: 30px;
            line-height: 30px
        }

        .el-input__icon {
            color: #d2d2d2;
            line-height: 30px
        }

        .common-contact .box-card {
            margin-top: 40px;
            border-color: #e9e9e9
        }

        .common-contact .el-card__body {
            padding: 10px 0
        }

        .common-contact .el-card__body>.text {
            display: flex;
            justify-content: space-around;
            border-bottom: 1px solid #e9e9e9;
            padding-bottom: 10px;
            margin-bottom: 10px
        }

        .common-contact .el-card__body>.text:last-child {
            margin-bottom: 0;
        }

        .common-contact .text .text {
            width: 46%;
            height: 28px;
            border: 1px solid #e9e9e9;
            padding-left: 5px;
            line-height: 28px;
            color: #666;
            font-size: 12px
        }

        .ticket-content-top .top-left .analysis-result {
            height: 7rem
        }

        .analysis-result .text {
            border-bottom: 0 !important;
            flex-wrap: wrap;
            justify-content: flex-start !important
        }

        .analysis-result .text .text {
            background: #eeeeee;
            border: 0;
            border-radius: 3px;
            margin: 0 0 .4rem .45rem;

        }

        .analysis-result .el-card__body>.text {
            padding: 0
        }

        .analysis-result .el-card__body {
            padding: 10px 0 0 0;
        }

        .analysis-result .text .text.active {
            background: #ff9000;
            color: #fff
        }

        .analysis-result .text .text i {
            font-size: 24px;
            vertical-align: -4px
        }

        .ticket-content-top .top-left.top-right {
            width: 68.9rem
        }

        .ticket-content-top .top-left.top-right .common-contact {
            width: 100%
        }

        .top-right .common-contact h5 input {
            float: right;
            width: 220px;
            border: 1px solid #e9e9e9;
            height: 30px;
            line-height: 30px;
            padding-left: 5px;
            color: #666666
        }

        .top-right-content {
            padding: 10px;
            border: 1px solid #e9e9e9;
            clear: both;
            height: 14.7rem;
            border-radius: 5px;
            margin-top: 42px
        }

        .top-right-content table {
            border-collapse: collapse;
            border-spacing: 0;
        }

        .top-right-content table th {
            color: #333333;
            font-weight: bold;
            padding-left: 1rem;
            height: 1.8rem
        }

        .top-right-content table:first-child tr:first-child {
            border: 0
        }

        .top-right-content .table-scoll table tr {
            border: 1px solid #e9e9e9
        }

        .top-right-content table td {
            height: 3rem;
            padding-left: 1rem;
            color: #666;
        }

        .top-right-content table td i {
            color: #aaa
        }

        .top-right-content .table-scoll table tr:nth-child(odd) {
            background: #eeeeee;
        }

        .top-right-content table:first-child tr {
            background: none
        }

        .top-right-content .table-scoll {
            height: 12rem;
            overflow-y: scroll;
            background: none
        }

        .top-right-content .table-scoll::-webkit-scrollbar {
            display: none
        }

        .top-right-content table td span {
            display: inline-block;
            margin: 5px 5px 5px 0
        }

        .ticket-content-bottom {
            border: 1px solid #e9e9e9;
            border-radius: 5px;
            width: 94.5vw;
            margin: 0 auto;
            padding-top: 25px
        }

        .ticket-content-bottom .ticket-step {
            height: 2px;
            background: #bcbcbc;
            position: relative
        }

        .ticket-content-bottom .ticket-step button {
            position: absolute;
            border-radius: 5px;
            background: #eeeeee;
            border: 0;
            color: #696969;
            padding: 10px;
            left: 124px;
            top: -18px;
            -moz-box-shadow: 1px 3px 5px #9A9A9A;
            -webkit-box-shadow: 1px 3px 5px #9A9A9A;
            box-shadow: 1px 3px 5px #9A9A9A;
        }

        .ticket-content-bottom .ticket-step button:hover {
            cursor: pointer
        }

        .ticket-content-bottom .ticket-step button.active {
            background: #759bcc;
            color: #fff
        }

        .ticket-content-bottom .ticket-step button:nth-child(2) {
            left: 310px
        }

        .ticket-content-bottom .ticket-step button:nth-child(3) {
            left: 533px
        }

        .ticket-content-bottom .ticket-step button:nth-child(4) {
            left: 769px
        }

        .ticket-content-bottom .ticket-step-content {
            height: 17rem;
            margin-top: 36px
        }

        .ticket-step-content .step-content-left {
            width: 45rem;
            height: 17rem;
            padding-left: 1rem;
            float: left;
        }

        .ticket-step-content .step-content-left span {
            color: #333;
            font-size: 20px
        }

        .ticket-step-content .step-content-left #main1,
        .ticket-step-content .step-content-left #main2 {
            width: 100%;
            height: 15.5rem;
        }

        .ticket-step-content .step-content-right {
            width: 30rem
        }

        .ticket-content .uploadFile {
            width: 95vw;
            height: 2px;
            background: #bcbcbc;
            margin: 112px auto 0;
            /* left: 50%;
            margin-left: -47.5vw; */
        }

        .ticket-content .uploadFile form {
            width: 100%;
            position: relative;
        }

        .ticket-content .uploadFile form input {
            display: none;
        }

        .ticket-content .uploadFile .fileDiv {
            position: absolute;
            display: inline-block;
            margin-left: 460px;
            border: 1px solid #bfbfbf;
            padding: 10px;
            top: -30px;
            background: #fff;
        }

        .ticket-content .uploadFile .fileDiv label {
            width: 140px;
            height: 40px;
            line-height: 40px;
            background: #759bcc;
            color: #fff;
            border: 0;
            border-radius: 3px;
            display: inline-block;
            text-align: center;
            vertical-align: 5px
        }

        .ticket-content .uploadFile .fileDiv label:hover {
            cursor: pointer
        }

        .ticket-content .uploadFile .fileDiv span {
            display: inline-block;
            width: 126px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            color: #6e6e6e;
        }

        .ticket-content .uploadFile .start-analysis {
            background: #ff9000;
            border: 0;
            color: #fff;
            height: 40px;
            width: 100px;
            border-radius: 3px;
            position: absolute;
            top: -20px;
            left: 1200px;
        }

        .ticket-step-content .correlation-analysis-left {
            width: 30rem;
            padding-left: 1rem;
            float: left;
            margin-top: 2rem;
        }

        .ticket-step-content .correlation-analysis-left .el-table th {
            background: #ededed !important
        }

        .ticket-step-content .correlation-analysis-left .el-table td {
            border-bottom: 0
        }

        .ticket-step-content .correlation-analysis-left .el-table::before {
            height: 0
        }

        .ticket-step-content .correlation-analysis-left .el-pagination {
            width: 20rem;
            margin: 1rem auto 0;
        }

        .ticket-step-content .ticket-step-source {
            float: left;
            width: 60rem;
        }

        .ticket-step-content .ticket-step-source h5 {
            text-align: right;
            width: 54rem;
            margin: 0 auto;
            color: #696969;
            font-size: 16px;
        }

        .ticket-step-content .ticket-step-source .content {
            width: 50rem;
            height: 13rem;
            border: 1px solid #9fa0a1;
            margin: 1rem auto 0;
        }

        .ticket-step-content .intimacy-left {
            width: 25rem;
            height: 17rem;
            padding-left: 1rem
        }

        .ticket-step-content .intimacy-left>input {
            width: 10rem;
            height: 30px;
            border: 1px solid #d2d1d1;
            color: #696969;
            padding-left: 5px;
            font-size: 16px;
        }

        .ticket-step-content .intimacy-title {
            width: 100%;
            color: #696969;
            margin-top: 10px
        }

        .ticket-step-content .intimacy-title i {
            font-size: 18px;
        }

        .ticket-step-content .intimacy-title span {
            float: right;
            color: #238bd1;
        }

        #contact-frequency {
            width: 100%;
            height: 13rem
        }

        .ticket-step-content .intimacy-middle {
            width: 20rem;
            height: 17rem;
            margin-left: 5rem;
            padding-top: 31px;
        }

        .ticket-step-content .tag-cloud {
            width: 15rem;
            height: auto;
            overflow: hidden;
            margin: 1rem 0 0 2rem
        }

        .ticket-step-content .tag-cloud li {
            font-size: 20px;
            color: #052e96
        }

        .ticket-step-content .tag-cloud li:nth-child(2) {
            font-size: 23px;
            color: #994a51
        }

        .ticket-step-content .tag-cloud li:nth-child(2) span {
            font-size: 10px;
            color: #6f9769;
            padding-left: 2px
        }

        .ticket-step-content .tag-cloud li:nth-child(3) {
            font-size: 30px;
            color: #333e55;
            padding-left: 5px
        }

        .ticket-step-content .tag-cloud li:nth-child(4) {
            font-size: 26px;
            color: #61998e;
            padding-left: 8px
        }

        .ticket-step-content .tag-cloud li:nth-child(5) {
            font-size: 20px;
            color: #9c7326;
            padding-left: 5px
        }

        .ticket-step-content .intimacy-right {
            width: 35rem;
            height: 17rem;
            padding-top: 31px;
            margin-left: 5rem
        }

        .ticket-step-content .time-quantum {
            margin-top: 2rem
        }

        .ticket-step-content .time-quantum .slider-container {
            float: left;
        }

        .ticket-step-content .time-quantum span {
            float: right;
        }

        .ticket-step-content .time-quantum span i {
            margin-right: .3rem
        }

        .ticket-step-content .time-quantum .theme-green .back-bar {
            background: #d1d6e0;
            height: 7px;
        }

        .ticket-step-content .back-bar .selected-bar {
            background: #63bfff;
        }

        #call-frequency-map{
            width: 100%;
            height: 10rem;
           margin-top:2.5rem;
        }
        .regional-distribution .intimacy-right {
            width:10rem;
            margin-left: 1rem;
            padding-top: 0
        }
        .regional-distribution .intimacy-title span{
            color: #444444
        }
        .regional-distribution .intimacy-left{
            margin-left: 2rem
        }
         #contact-frequency1,#contact-frequency2{
            width:20rem;
            height: 15rem
        }
    </style>
</head>

<body class="bighome2">
    <div id="app" v-cloak>
        <div style="width: 100%;height: 3.8rem;background-image: url('../image/top-logo.png'); background-size: 100%;background-position: center;background-repeat: no-repeat;">
            <ul class="tabUl">
                <li :class="{'li_active':activeIndex === index}" v-for="(item, index) in menuList" :key="index" @click="routerGo(item)">{{item.name}}
                    <ul v-if="item.childList">
                        <li v-for="(child,childIndex) in item.childList" :key="childIndex">{{child.name}}</li>
                    </ul>
                </li>
            </ul>
        </div>
        <div style="width: 100%;height: 3.5rem;display: flex;flex-direction: row;flex-wrap: nowrap;justify-content: left;align-items: center;background-color: #0A1339;">
            <div style="width: 0.3rem;height: 0.3rem;background-color: #0162A6;border-radius: 0.15rem;margin-left: 2rem;margin-right: 0.6rem">
            </div>
            <div style="font-size:0.8rem;font-family:MicrosoftYaHei;color:#0162A6;line-height:3.5rem;">智能作战系统 > 分析工具 ></div>
            <div style="font-size:0.8rem;font-family:MicrosoftYaHei;color:#47CDFE;line-height:3.5rem;">话单分析</div>
            <!-- <el-button type="primary" size="mini" @click="window.location.href='bigHome.html'" style="position:absolute;right:5rem;">
            重点人员管控
        </el-button> -->
        </div>
        <div class="ticket-content">
            <div class="ticket-content-top">
                <div class="top-left">
                    <div class="common-contact">
                        <h5>
                            <span class="demonstration fl">共同联系人</span>
                            <el-date-picker class="fr" v-model="value1" type="datetime" placeholder="请选择开始日期">
                            </el-date-picker>
                        </h5>
                        <el-card class="box-card cl">
                            <div class="text item">
                                <div class="text item">
                                    13809871234
                                </div>
                                <div class="text item">
                                    13809871234
                                </div>
                            </div>
                            <div class="text item">
                                <div class="text item">
                                    13809871234
                                </div>
                                <div class="text item">
                                    13809871234
                                </div>
                            </div>
                            <div class="text item">
                                <div class="text item">
                                    13809871234
                                </div>
                                <div class="text item">
                                    13809871234
                                </div>
                            </div>
                        </el-card>
                    </div>
                    <div class="common-contact analysis-result">
                        <h5>
                            <span class="demonstration fl">话单个体分析结果</span>
                        </h5>
                        <el-card class="box-card cl">
                            <div class="text item">
                                <div class="text item active">
                                    <i class="icon iconfont icon-shouji"></i>13809871234
                                </div>
                                <div class="text item">
                                    <i class="icon iconfont icon-shouji"></i>13809871234
                                </div>
                                <div class="text item">
                                    <i class="icon iconfont icon-shouji"></i>13809871234
                                </div>
                                <div class="text item">
                                    <i class="icon iconfont icon-shouji"></i>13809871234
                                </div>
                            </div>
                        </el-card>
                    </div>
                </div>
                <div class="top-left top-right">
                    <div class="common-contact">
                        <h5>
                            <span class="demonstration fl">潜在关系分析</span>
                            <input type="number" placeholder="请输入要搜索的手机号码">
                        </h5>
                        <div class="top-right-content">
                            <table>
                                <colgroup>
                                    <col name="el-table_1_column_1" width="180">
                                </colgroup>
                                <tr>
                                    <th>基站名</th>
                                    <th>同时出现人员</th>
                                </tr>
                            </table>
                            <div class="table-scoll">
                                <table>
                                    <colgroup>
                                        <col name="el-table_1_column_1" width="180">
                                    </colgroup>
                                    <tr>
                                        <td>朝阳路基站</td>
                                        <td>
                                            <span>
                                                <i class="icon iconfont icon-guanliyuan"></i>15890110987 (2017-05-05 14:22:11)</span>
                                            <span>
                                                <i class="icon iconfont icon-guanliyuan"></i>15890110987 (2017-05-05 14:22:11)</span>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>朝阳路基站</td>
                                        <td>
                                            <span>
                                                <i class="icon iconfont icon-guanliyuan"></i>15890110987 (2017-05-05 14:22:11)</span>
                                            <span>
                                                <i class="icon iconfont icon-guanliyuan"></i>15890110987 (2017-05-05 14:22:11)</span>
                                            <span>
                                                <i class="icon iconfont icon-guanliyuan"></i>15890110987 (2017-05-05 14:22:11)</span>
                                            <span>
                                                <i class="icon iconfont icon-guanliyuan"></i>15890110987 (2017-05-05 14:22:11)</span>
                                            <span>
                                                <i class="icon iconfont icon-guanliyuan"></i>15890110987 (2017-05-05 14:22:11)</span>
                                            <span>
                                                <i class="icon iconfont icon-guanliyuan"></i>15890110987 (2017-05-05 14:22:11)</span>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>朝阳路基站</td>
                                        <td>
                                            <span>
                                                <i class="icon iconfont icon-guanliyuan"></i>15890110987 (2017-05-05 14:22:11)</span>
                                            <span>
                                                <i class="icon iconfont icon-guanliyuan"></i>15890110987 (2017-05-05 14:22:11)</span>
                                            <span>
                                                <i class="icon iconfont icon-guanliyuan"></i>15890110987 (2017-05-05 14:22:11)</span>
                                            <span>
                                                <i class="icon iconfont icon-guanliyuan"></i>15890110987 (2017-05-05 14:22:11)</span>
                                            <span>
                                                <i class="icon iconfont icon-guanliyuan"></i>15890110987 (2017-05-05 14:22:11)</span>
                                            <span>
                                                <i class="icon iconfont icon-guanliyuan"></i>15890110987 (2017-05-05 14:22:11)</span>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>朝阳路基站</td>
                                        <td>
                                            <span>
                                                <i class="icon iconfont icon-guanliyuan"></i>15890110987 (2017-05-05 14:22:11)</span>
                                            <span>
                                                <i class="icon iconfont icon-guanliyuan"></i>15890110987 (2017-05-05 14:22:11)</span>
                                            <span>
                                                <i class="icon iconfont icon-guanliyuan"></i>15890110987 (2017-05-05 14:22:11)</span>
                                            <span>
                                                <i class="icon iconfont icon-guanliyuan"></i>15890110987 (2017-05-05 14:22:11)</span>
                                            <span>
                                                <i class="icon iconfont icon-guanliyuan"></i>15890110987 (2017-05-05 14:22:11)</span>
                                            <span>
                                                <i class="icon iconfont icon-guanliyuan"></i>15890110987 (2017-05-05 14:22:11)</span>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>朝阳路基站</td>
                                        <td>
                                            <span>
                                                <i class="icon iconfont icon-guanliyuan"></i>15890110987 (2017-05-05 14:22:11)</span>
                                            <span>
                                                <i class="icon iconfont icon-guanliyuan"></i>15890110987 (2017-05-05 14:22:11)</span>
                                            <span>
                                                <i class="icon iconfont icon-guanliyuan"></i>15890110987 (2017-05-05 14:22:11)</span>
                                            <span>
                                                <i class="icon iconfont icon-guanliyuan"></i>15890110987 (2017-05-05 14:22:11)</span>
                                            <span>
                                                <i class="icon iconfont icon-guanliyuan"></i>15890110987 (2017-05-05 14:22:11)</span>
                                            <span>
                                                <i class="icon iconfont icon-guanliyuan"></i>15890110987 (2017-05-05 14:22:11)</span>
                                        </td>
                                    </tr>
                                </table>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
            <div class="ticket-content-bottom">
                <div class="ticket-step">
                    <button class="active">概括</button>
                    <button>亲密度分析</button>
                    <button>通话地区分布</button>
                    <button>联系人关联分析</button>
                </div>
                <!-- <div class="ticket-step-content">
                    <div class="step-content-left">
                        <span class="linkman">联系人分布</span>
                        <div id="main1"></div>
                    </div>
                    <div class="step-content-left step-content-right">
                        <span class="linkman">时间段通话分布</span>
                        <div id="main2"></div>
                    </div>
                </div> -->
                <!-- <div class="ticket-step-content">
                    <div class="correlation-analysis-left">
                        <el-table :data="tableData" style="width: 100%">
                            <el-table-column prop="date" label="号码" width="180">
                            </el-table-column>
                            <el-table-column prop="name" label="频次" width="180">
                            </el-table-column>
                            <el-table-column prop="address" label="备注">
                            </el-table-column>
                        </el-table>
                        <el-pagination background layout="prev, pager, next" :total="999">
                        </el-pagination>
                    </div>
                    <div class="ticket-step-source">
                       <h5>来源</h5>
                       <div class="content"></div>
                    </div>
                </div> -->
                <!-- <div class="ticket-step-content">
                    <div class="intimacy-left fl">
                        <input type="text" value="2015-06-26 — 2017-06-05">
                        <h5 class="intimacy-title">
                            联系频次TOP10
                            <span>
                                <i class="icon iconfont icon-icon-5"></i>更多</span>
                        </h5>
                        <div id="contact-frequency">
                        </div>
                    </div>
                    <div class="intimacy-middle fl">
                        <h5 class="intimacy-title">
                            通话时长TOP10
                            <span>
                                <i class="icon iconfont icon-icon-5"></i>更多</span>
                        </h5>
                        <ul class="tag-cloud">
                            <li>16156731123</li>
                            <li>16156731123
                                <span>16156731123</span>
                            </li>
                            <li>16156731123</li>
                            <li>16156731123</li>
                            <li>16156731123</li>
                        </ul>
                    </div>
                    <div class="intimacy-right fl">
                        <h5 class="intimacy-title">
                            时间段通话频次
                            <span>
                                <i class="icon iconfont icon-icon-5"></i>更多</span>
                        </h5>
                        <div class="time-quantum">
                            <input type="hidden" class="range-slider">
                            <span>
                                <i class="icon iconfont icon-weibiaoti--23"></i>时间段</span>
                        </div>
                        <div id="call-frequency-map"></div>
                    </div>
                </div> -->
                <div class="ticket-step-content regional-distribution">
                        <div class="intimacy-right fl">
                                <h5 class="intimacy-title">
                                    时间段通话频次
                                    <span><i class="icon iconfont icon-weibiaoti--23"></i>时间段</span>
                                </h5>
                                <div class="time-quantum">
                                    <input type="hidden" class="range-slider1">
                                </div>
                            </div>
                    <div class="intimacy-left fl">
                        <h5 class="intimacy-title">
                            基站TOP10
                        </h5>
                        <div id="contact-frequency1">
                        </div>
                    </div>
                    <div class="intimacy-left fl">
                            <h5 class="intimacy-title">
                                    昭阳路基站—联系频次TOP10
                            </h5>
                            <div id="contact-frequency2">
                            </div>
                        </div>

                </div>
            </div>
        </div>
        <!-- <div class="ticket-content">
            <div class="uploadFile">
                <form action="" method="POST">
                    <div class="fileDiv">
                        <label id="fileButton" for="fileInput">选择电话详情</label>
                        <input type="file" accept=".xls,.xlsx" id="fileInput" @change="uploadFile($event)">
                        <span>{{fileName || '16285425482通话详单.EXCEL'}}</span>
                    </div>
                    <button class="start-analysis">开始分析</button>
                </form>
            </div> -->
    </div>
    </div>
    <!-- 引入组件库 -->
    <script type="text/javascript" src="../js/vue/vue.js"></script>
    <script src="../js/jquery-3.0.0.min.js.js"></script>
    <script type="text/javascript" src="../js/element/element.js"></script>
    <script type="text/javascript" src="../js/swiper/swiper-4.1.6.min.js"></script>
    <!--<script src="https://cdn.jsdelivr.net/npm/vue-awesome-swiper@3.1.2/dist/vue-awesome-swiper.js"></script>-->
    <script type="text/javascript" src="../js/urls.js"></script>
    <script src="../js/axios.min.js"></script>
    <script type="text/javascript" src="../js/utils.js"></script>
    <!-- <script src="../js/map/baiduInterface.js"></script> -->
    <script src="../js/mapComponent.js"></script>
    <script src="../js/areaData.js"></script>
    <script src="../js/echarts.min.js"></script>
    <script src="../js/china.js"></script>
    <script src="../js/geoCoordMap.js"></script>
    <script src="../js/jquery-range/jquery.range-min.js"></script>

    <script type="text/javascript">
        var vm;
        vm = new Vue({
            el: '#app',
            data: {
                menuList: [{
                        name: '地界防控',
                        path: '#'
                    },
                    {
                        name: '分析工具',
                        path: '#',
                        childList: [{
                            name: '数据对比',
                            path: '#'
                        }, {
                            name: '话单分析',
                            path: '#'
                        }]
                    },
                    {
                        name: '轨迹分析',
                        path: '#'
                    },
                    {
                        name: '人员维稳',
                        path: '#'
                    },
                    {
                        name: '个人全息档案',
                        path: '#'
                    },
                    {
                        name: '安全态势',
                        path: '#'
                    }
                ],
                activeIndex: -1,
                value1: '',
                value2: '',
                value3: '',
                fileName: '',
                tableData: [{
                    date: '15738592810',
                    name: '35',
                    address: '张三、李四'
                }, {
                    date: '15738592810',
                    name: '35',
                    address: '张三、李四'
                }, {
                    date: '15738592810',
                    name: '35',
                    address: '张三、李四'
                }, {
                    date: '15738592810',
                    name: '35',
                    address: '张三、李四'
                }],
                pickerOptions1: {
                    shortcuts: [{
                        text: '今天',
                        onClick(picker) {
                            picker.$emit('pick', new Date());
                        }
                    }, {
                        text: '昨天',
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24);
                            picker.$emit('pick', date);
                        }
                    }, {
                        text: '一周前',
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', date);
                        }
                    }]
                },
            },
            created: function () {},
            mounted: function () {
                // this.contactsDistribute();
                // this.communicateDistribute();
                // this.uploadFile();
                // this.contactFrequency();
                // this.callFrequency();
                this.regionalDistribution();
            },
            methods: {
                routerGo(item) {
                    window.location.href = item.path
                },
                contactsDistribute: function () { //联系人分布
                    var myChart = echarts.init(document.getElementById('main1'));
                    var option = {
                        tooltip: {
                            trigger: 'item',
                            formatter: '{b}'
                        },
                        color: ['#070093', '#1c3fbf', '#1482e5',
                            '#70b4eb', '#b4e0f3', '#e0e0e0'
                        ],
                        legend: {
                            left: 'left',
                            top: '10%',
                            orient: 'vertical',
                            itemWidth: 20,
                            itemHeight: 20,
                            data: ['>500', '200-400', '100-200', '50-100', '10-50', '<10'],
                            selectedMode: false
                        },
                        series: [{
                                name: '>500',
                                type: 'map',
                                mapType: 'china',
                                selectedMode: false,
                                layoutCenter: ['50%', '50%'],
                                layoutSize: 370,
                                label: {
                                    normal: {
                                        show: false
                                    },
                                    emphasis: {
                                        show: false
                                    },
                                },
                                data: [{
                                        name: '广东',
                                        selected: true,
                                        emphasis: {
                                            itemStyle: {
                                                areaColor: '#070093',
                                            }
                                        }
                                    },
                                    {
                                        name: '四川',
                                        selected: true,
                                        emphasis: {
                                            itemStyle: {
                                                areaColor: '#1c3fbf',
                                            }
                                        }
                                    }
                                ],
                                itemStyle: {
                                    normal: {
                                        areaColor: '#e0e0e0',
                                        borderColor: '#fff'
                                    }
                                },
                                showLegendSymbol: false
                            }, {
                                name: '200-400',
                                type: 'map',
                                selectedMode: false
                            },
                            {
                                name: '100-200',
                                type: 'map',
                                selectedMode: false
                            },
                            {
                                name: '50-100',
                                type: 'map',
                                selectedMode: false
                            },
                            {
                                name: '10-50',
                                type: 'map',
                                selectedMode: false
                            },
                            {
                                name: '<10',
                                type: 'map',
                                selectedMode: false
                            }
                        ]
                    };
                    // 使用刚指定的配置项和数据显示图表。
                    myChart.setOption(option);
                },
                communicateDistribute: function () { //时间段通话分布
                    var myChart1 = echarts.init(document.getElementById('main2'));
                    var option = {
                        angleAxis: {
                            type: 'category',
                            data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19,
                                20, 21, 22, 23, 24
                            ],
                            z: 10,
                            axisTick: {
                                lineStyle: {
                                    color: '#7e93f6'
                                }
                            },
                            splitLine: {
                                show: true,
                                lineStyle: {
                                    color: '#a883f3'
                                }
                            }
                        },
                        radiusAxis: {
                            axisLabel: {
                                show: false
                            },
                            axisLine: {
                                show: false
                            },
                            axisTick: {
                                show: false
                            },
                            splitLine: {
                                show: false
                            }
                        },
                        polar: {},
                        series: [{
                            type: 'bar',
                            coordinateSystem: 'polar',
                            itemStyle: {
                                color: '#a883f3'
                            },
                            data: [1, 2, 3, 4, 5, 6, 7, 8, 9]
                        }]
                    }
                    // 使用刚指定的配置项和数据显示图表。
                    myChart1.setOption(option);
                },
                uploadFile: function (ev) { //上传文件
                    this.fileName = ev.target.files[0].name;
                },
                contactFrequency: function () { //联系频次
                    var myChart1 = echarts.init(document.getElementById('contact-frequency'));
                    var option = {
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                type: 'shadow'
                            }
                        },
                        grid: {
                            left: '3%',
                            bottom: '3%',
                            containLabel: true
                        },
                        xAxis: {
                            type: 'value',
                            boundaryGap: [0, 0.01],
                            name: '次数'
                        },
                        yAxis: {
                            type: 'category',
                            data: ['王朝伟', '赵飞翔', '张珊', '陈晓曦', '江辰']
                        },
                        series: [{
                            type: 'bar',
                            data: [{
                                    value: 10,
                                    itemStyle: {
                                        color: '#2ec7c9'
                                    }
                                },
                                {
                                    value: 5,
                                    itemStyle: {
                                        color: '#b6a2de'
                                    }
                                },
                                {
                                    value: 20,
                                    itemStyle: {
                                        color: '#5ab1ef'
                                    }
                                },
                                {
                                    value: 20,
                                    itemStyle: {
                                        color: '#d87a80'
                                    }
                                },
                                {
                                    value: 50,
                                    itemStyle: {
                                        color: '#ffb980'
                                    }
                                }
                            ],
                        }, ]
                    };

                    // 使用刚指定的配置项和数据显示图表。
                    myChart1.setOption(option);
                },
                callFrequency: function () { //通话频次
                    $('.range-slider').jRange({
                        from: 1,
                        to: 24,
                        step: 1,
                        format: '%s',
                        width: 500,
                        showLabels: true,
                        isRange: true,
                        showScale: false
                    });
                    var myChart1 = echarts.init(document.getElementById('call-frequency-map'));
                    var option = {
                        tooltip: {
                            trigger: 'item',
                            formatter: "{a} <br/>{b} : {c} ({d}%)"
                        },
                        series: [
                            {
                                name: '通话频次',
                                type: 'pie',
                                radius: [30, 80],
                                center: ['50%', '50%'],
                                roseType: 'area',
                                data: [{
                                        value: 10,
                                        name: '1385739582',
                                        tooltip:{

                                        }
                                    },
                                    {
                                        value: 5,
                                        name: '13857395820'
                                    },
                                    {
                                        value: 15,
                                        name: '138573958'
                                    },
                                    {
                                        value: 25,
                                        name: '13857395'
                                    },
                                    {
                                        value: 20,
                                        name: '138573950'
                                    },
                                    {
                                        value: 35,
                                        name: '138573920'
                                    },
                                    {
                                        value: 30,
                                        name: '1385735820'
                                    },
                                    {
                                        value: 40,
                                        name: '138595820'
                                    }
                                ]
                            }
                        ]
                    };
                    // 使用刚指定的配置项和数据显示图表。
                    myChart1.setOption(option);
                },
                regionalDistribution:function(){//通话地区分布
                $('.range-slider1').jRange({
                        from: 1,
                        to: 24,
                        step: 1,
                        format: '%s',
                        width: 200,
                        showLabels: true,
                        isRange: true,
                        showScale: false
                    });

                    var myChart1 = echarts.init(document.getElementById('contact-frequency1'));
                    var myChart2 = echarts.init(document.getElementById('contact-frequency2'));
                    var data1=[{
                                    value: 10,
                                    itemStyle: {
                                        color: '#ffb980'
                                    }
                                },
                                {
                                    value: 5,
                                    itemStyle: {
                                        color: '#ffb980'
                                    }
                                },
                                {
                                    value: 20,
                                    itemStyle: {
                                        color: '#ffb980'
                                    }
                                },
                                {
                                    value: 20,
                                    itemStyle: {
                                        color: '#ffb980'
                                    }
                                },
                                {
                                    value: 50,
                                    itemStyle: {
                                        color: '#ffb980'
                                    }
                                }
                            ];
                            var data2=[{
                                    value: 10,
                                    itemStyle: {
                                        color: '#d87a80'
                                    }
                                },
                                {
                                    value: 5,
                                    itemStyle: {
                                        color: '#d87a80'
                                    }
                                },
                                {
                                    value: 20,
                                    itemStyle: {
                                        color: '#d87a80'
                                    }
                                },
                                {
                                    value: 20,
                                    itemStyle: {
                                        color: '#d87a80'
                                    }
                                },
                                {
                                    value: 50,
                                    itemStyle: {
                                        color: '#d87a80'
                                    }
                                }
                            ];
                    var option = {
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                type: 'shadow'
                            }
                        },
                        grid: {
                            left:0,
                            top:'10%',
                             height:'90%',
                            containLabel: true
                        },
                        xAxis: {
                            type: 'value',
                            boundaryGap: [0, 0.01],
                            name: '次数'
                        },
                        yAxis: {
                            type: 'category',
                            data: ['天马路基站', '天马路基站', '天马路基站', '天马路基站', '天马路基站']
                        },
                        series: [{
                            type: 'bar',
                            data: data1
                        }, ]
                    };
                    var option1 = {
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                type: 'shadow'
                            }
                        },
                        grid: {
                            left:0,
                            top:'10%',
                             height:'90%',
                            containLabel: true
                        },
                        xAxis: {
                            type: 'value',
                            boundaryGap: [0, 0.01],
                            name: '次数'
                        },
                        yAxis: {
                            type: 'category',
                            data: ['天马路基站', '天马路基站', '天马路基站', '天马路基站', '天马路基站']
                        },
                        series: [{
                            type: 'bar',
                            data: data2
                        }, ]
                    };
                    // 使用刚指定的配置项和数据显示图表。
                    myChart1.setOption(option);
                    myChart2.setOption(option1);
            }
            },
        })
    </script>
</body>

</html>